<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test li</title>
		<script type="text/javascript" src="../js/jquery-3.3.1.slim.min.js"></script>
		<link type="text/css" rel="stylesheet" href="../css/common.css" />
		<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<style type="text/css">
		body{
            color: aliceblue;
            cursor:default;
            background: #21303E;
            width: 500px;
            height: 600px;
        }
        ul{
            list-style: none;
        }
		li:hover{
			background-color: #5A6268;
		}
		p:hover{
			background-color: #5A6268;
		}
        hr{
            margin-bottom: 2%;
            margin-top: 2%;
        }
        input{
            display: block;
        }
        .hrList{
            margin-right: 10%;
        }
        .spanList{
            margin-right: 10%;
        }
        .liList{
            margin-right: 10%;
        }
	</style>
	<body>
		<div id="rightPart" style="float: left;margin-left: 5%;">
                <div id="listOption">
                    <p style="font-weight: bold;font-size: large">AAA</p>
                    <ul>
                        <li class="liList" onclick="changeSelect(this)">
                            <label for="modeBg">aaa</label>
                            <input type="radio" name="mode" value="0" id="modeBg" />
                            <span style="float: right;" id="modeBg_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                        <li class="liList" onclick="changeSelect(this)">
                            <label for="modeYy">bbb</label>
                            <input type="radio" name="mode" value="1" id="modeYy" />
                            <span style="float: right;" id="modeYy_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                        <li class="liList" onclick="changeSelect(this)">
                            <label for="modeXn">ccc</label>
                            <input type="radio" name="mode" value="2" id="modeXn" />
                            <span style="float: right;" id="modeXn_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                    </ul>
                    <p style="font-weight: bold;font-size: large">BBB</p>

                    <ul>
                        <li class="liList" onclick="changeSelect(this)"> 
                            <label for="deviceNone">none</label>
                            <input type="radio" name="audio" value="0" id="deviceNone" />
                            <span style="float: right;" id="deviceNone_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                        <li class="liList" onclick="changeSelect(this)">
                            <label for="deviceBf">ddd</label>
                            <input type="radio" name="audio" value="1" id="deviceBf" />
                            <span style="float: right;" id="deviceBf_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                        <li class="liList" onclick="changeSelect(this)">
                            <label for="deviceLy">eee</label>
                            <input type="radio" name="audio" value="2" id="deviceLy" />
                            <span style="float: right;" id="deviceLy_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                        <li class="liList" onclick="changeSelect(this)">
                            <label for="deviceTx">fff</label>
                            <input type="radio" name="audio" value="3" id="deviceTx" />
                            <span style="float: right;" id="deviceTx_span" class="spanList"></span>
                        </li>
                        <hr class="hrList" color="white">
                    </ul>
                </div>
	</body>
	
	<script type="text/javascript">
		function changeSelect(element) {
            if (element) {
                var inputRad = element.children[1];//second element is radio
                inputRad.checked = "checked";
                //clear all sign in span
                var parentUl = element.parentNode;
                var ulSpans = $(parentUl).find("span");
                for (var i = 0; i < ulSpans.length;i++) {
                    ulSpans[i].innerHTML = '';
                }
                var spanEle = element.children[2];//third element is span
                spanEle.innerHTML = "&radic;";
                var modeVal = $('input[name="mode"]:checked').val();
                console.log('mode val is: ' + modeVal);
                var audioVal = $('input[name="audio"]:checked').val();
                console.log('the audio val is: ' + audioVal);


                //prevent "MaoPao"
                window.event.cancelBubble=true;
            }
        }
	</script>
</html>
